<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>发布新订单</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <link rel="stylesheet" href="__SCRIPT__/webuploader/webuploader.css" ><!--webUploader上传组件-->
    <link rel="stylesheet" href="__SCRIPT__/webuploader/style.css" ><!--webUploader上传组件-->
    <link href="__JSS__/plugins/layui/css/layui.css" rel="stylesheet">
    <style>

        .box{
            width:1180px;
            background:rgba(255,255,255,1);
            margin:40px auto 152px;
        }
        .tit{
            font-size:22px;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding:32px 0 40px 40px;
        }
        .box1{
            padding-left:100px;
            padding-right:100px;
        }
        .left{
            width:150px;
            font-size:14px;
            font-weight:400;
            color:#666666;
        }
        .red{
            color: #FF3B30;
        }
        .one{
            align-items: center;
            margin-bottom:24px;
        }
        .kuang{
            width:572px;
            height:32px;
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            align-items: center;
            padding-right:12px;
            font-size:12px;
            font-weight:400;
            color:rgba(204,204,204,1);
        }
        input[type="text"]{
            height:32px;
            margin:0;
            padding:0 12px;
            font-size:14px;
            color:#666666;
            background:transparent;
            outline: none;
        }
        input::-webkit-input-placeholder{
            color:#CCCCCC;
        }
        .down{
            width:12px;
            height:8px;
        }
        .kuang1{
            width:142px;
            height:32px;
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            padding-right:12px;
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            align-items: center;
            margin-right:24px;
        }
        input[type="tel"],input[type="text"]{
            width:80px;
            height:32px;
            margin:0;
            padding:0 0 0 12px;
            font-size:14px;
            color:#666666;
            background:transparent;
            outline: none;
        }
        input[name="li"]{
            width:62px;
            height:32px;
            margin:0;
            padding:0 0 0 12px;
            font-size:14px;
            color:#666666;
            background:transparent;
        }
        .tit1{
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-left:29px;
            margin-right:16px;
        }
        .one1{
            margin-bottom:16px;
        }
        .label{
            display: inline-block;
            width:104px;
            height:32px;
            line-height: 32px;
            text-align: center;
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            margin-right:16px;
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-bottom:8px;
        }
        .label_active{
            background:rgba(252,43,64,0.1);
            border-radius:4px;
            border:none;
            color:rgba(252,43,64,1);
        }
        input[name="long"]{
            width:224px;
            height:32px;
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            margin:0;
            padding:0 16px;
            font-size:14px;
            color:#666666;
            background:transparent;
            outline: none;
        }
        .imggg{
            width:90px;
            height:90px;
            margin-right:16px;
        }
        .button{
            padding-top:54px;
            padding-bottom:108px;
        }
        .btn1{
            width:88px;
            height:32px;
            background:rgba(250,250,250,1);
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:32px;
            text-align: center;
            margin-left:374px;
            margin-right:56px;
            cursor: pointer;
        }
        .btn2{
            width:88px;
            height:32px;
            background:rgba(252,43,64,1);
            border-radius:4px;
            font-size:14px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:32px;
            text-align: center;
            cursor: pointer;
        }
        #order,
        #about,
        #user {
            display: none;
        }
    </style>
</head>
<body>
{include file="public/header"}

<div class="box container">
    <div class="tit">发布新订单</div>
    <form id="fabuorder">
    <div class="box1">
        <!---->
        <style>
            select{
                border:1px solid #ccc;
                margin-right: 20px;
                height: 100%;
            }
            .aaa{}
        </style>
        <!---->
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>选择出发地</div>
            <div class="kuang flex-wrap" style="border: none">
                <select name="sheng" class="flex-con">
                    <option value="">---- 请选择省 ----</option>
                    {volist name='province' id='p'}
                    <option value="{$p.district_id}">{$p.district}</option>
                    {/volist}
                </select>
                <select name="shi" class="flex-con">
                    <option value="">---- 请选择市 ----</option>
                </select>
                <select name="qu" class="flex-con">
                    <option value="">---- 请选择区 ----</option>
                </select>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>编辑出发地详细地址</div>
            <div class="kuang flex-wrap">
                <input type="text" name="order_go_address" placeholder="请输入出发地详细地址"  class="flex-con">
                <div>0/30</div>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>选择目的地</div>
            <div class="kuang flex-wrap" style="border: none">
                <select name="sheng2" class="flex-con">
                    <option value="">---- 请选择省 ----</option>
                    {volist name='province' id='p'}
                    <option value="{$p.district_id}">{$p.district}</option>
                    {/volist}
                </select>
                <select name="shi2" class="flex-con">
                    <option value="">---- 请选择市 ----</option>
                </select>
                <select name="qu2" class="flex-con">
                    <option value="">---- 请选择区 ----</option>
                </select>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>编辑目的地详细地址</div>
            <div class="kuang flex-wrap">
                <input type="text" name="order_to_address" placeholder="请输入目的地详细地址"  class="flex-con">
                <div>0/30</div>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>货物名称</div>
            <div class="kuang flex-wrap">
                <input type="text" name="order_goods_name" placeholder="请输入货物名称" class="flex-con">
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>支付方式</div>
            <div class="kuang flex-wrap" style="border: none;width: 200px">
                <select name="order_zf_type" class="flex-con">
                    <option value="1">&nbsp;&nbsp;线上</option>
                    <option value="2">&nbsp;&nbsp;线下</option>
                </select>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>货物单位</div>
            <div class="kuang1 flex-wrap">
                <input type="text" name="order_goods_ton" class="flex-con" placeholder="吨">
                <div>吨</div>
            </div>
            <div class="kuang1 flex-wrap">
                <input type="text" name="order_goods_m" style="width: 60px" class="flex-con" placeholder="立方米">
                <div style="display: ruby !important;">立方米</div>
            </div>
            <div class="tit1">运费金额</div>
            <div class="kuang1 flex-wrap">
                <input type="tel" name="order_freight"  class="flex-con" placeholder="元">
                <div>元</div>
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left"><span class="red">*</span>装车时间</div>
            <div class="kuang flex-wrap">
                <input type="text" name="order_zc_time" placeholder="请选择" readonly class="flex-con test_item">
                <img src="__IMG__/down1.png" class="down">
            </div>
        </div>
        <div class="one flex-wrap">
            <div class="left">备注</div>
            <div class="kuang flex-wrap">
                <input type="text" name="order_intro" placeholder="请输入备注信息" maxlength="30" class="flex-con">
                <div>最多30字</div>
            </div>
        </div>
        <div class="one1 flex-wrap">
            <div class="left"><span class="red">*</span>装卸类型</div>
            <div class="flex-con">
                {volist name="list.zx" id='z'}
                <div class="label {if $key == 0}label_active{/if}" data-id="{$z.zxlx_id}" data-type="1">{$z.zxlx_name}</div>
                {/volist}
            </div>
        </div>
        <div class="one1 flex-wrap">
            <div class="left"><span class="red">*</span>车型</div>
            <div class="flex-con">
                <div class="label label_active" data-type="2">不限</div>
                {volist name="list.cx" id='z'}
                <div class="label" data-type="2">{$z.cx_name}</div>
                {/volist}
            </div>
        </div>
        <div class="one1 flex-wrap">
            <div class="left"><span class="red">*</span>车长</div>
            <div class="flex-con">
                {volist name="list.cc" id='z'}
                <div class="label {if $key == 0}label_active{/if}" data-type="3">{$z.cclb_name}</div>
                {/volist}
            </div>
        </div>
        <div class="one1 flex-wrap">
            <div class="left"><span class="red">*</span>货物类型</div>
            <div class="flex-con">
                {volist name="list.hwlx" id='z'}
                <div class="label {if $key == 0}label_active{/if}" data-id="{$z.hwlx_id}" data-type="4">{$z.hwlx_name}</div>
                {/volist}
            </div>
        </div>
        <div class="flex-wrap">
            <div class="c_l c_l4" style="font-size: 14px">上传货物图片</div>
            <div class="layui-form-item layui-col-md-offset1 layui-col-md10" style="margin-left: 20px">
                <div class="layui-input-block" style="margin: 0">
                    <input type="hidden" name="order_goods_img" id="photo" lay-verify="image">
                    <div id="uploader" class="container-s">
                        <div class="queueList">
                            <div class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将照片拖到这里</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="layui-progress layui-progress-big active-s" lay-showpercent="true">
                                <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
                                </div>
                                <span></span>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="goPicker" class="filePicker2"></div>
                                <div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!---->
        <input type="hidden" name="zxlx_id" id="zxlx_id" value="{$list['zx'][0]['zxlx_id']}" /> <!--装卸类型：id-->
        <input type="hidden" name="cx_id" id="cx_id" value="不限" /> <!--车型：名字-->
        <input type="hidden" name="order_cc" id="order_cc" value="不限" /> <!--车厂：名字-->
        <input type="hidden" name="hwlx_id" id="hwlx_id" value="{$list['hwlx'][0]['hwlx_id']}" /> <!--货物类型：id-->
        <!---->
        <input type="hidden" name="shi_go" id="shi_go" value="" />
        <input type="hidden" name="shi_to" id="shi_to" value="" />
        <!---->
        <!--防止重复提交-->
        <input type="hidden" name="repeatSubmit" id="repeatSubmit" value="1" />
        <!---->
        <div class="button flex-wrap">
            <div class="btn1" onclick="submitOrder(1);">询价</div>
            <div class="btn2" onclick="submitOrder(2);">下单</div>
        </div>
    </div>
    </form>
</div>
</body>
</html>
<script src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMINJS__/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="__SCRIPT__/wk.js"></script>
<script type="text/javascript" src="__SCRIPT__/webuploader/webuploader.js"></script>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script type="text/javascript">
    var n = wk.uploads({num:19,type:'jpg,png,jpeg',url:"{:url('shop/Upload/upload')}"});
    function imgDel(e,obj){
        wk.uploads_del(e,obj,n,"{:url('home/upload/deleteLocality')}");
    }
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //同时绑定多个
        lay('.test_item').each(function(){
            laydate.render({
                elem: this
                ,format:'yyyy-MM-dd HH:mm:ss'
                ,type:'datetime'
                ,trigger: 'click'
            });
        });
    });
    $('.label').click(function () {
        var label_type = $(this).attr('data-type');
        if(label_type == 1 || label_type == 4){
            $(this).addClass('label_active');
            $(this).siblings().removeClass('label_active');
        }else{
            if($(this).hasClass('label_active') && $(this).siblings('.label_active').length <= 0){
                alert('请至少选择一个！');
                return false;
            }
            var label_text = $(this).text();
//
            var value_2_3 = '';
//
            if($(this).hasClass('label_active')){
                $(this).removeClass('label_active');
            }else{
                $(this).addClass('label_active');
                value_2_3 = label_text + ',';
            }

            if(label_text == '不限'){
                $(this).siblings().removeClass('label_active');
                //--------赋值 start ----------
                if(label_type == 2){
                    $('#cx_id').val('不限');
                }
                if(label_type == 3){
                    $('#order_cc').val('不限');
                }
                //---------赋值 end ---------
            }else{
                $(this).siblings().eq(0).removeClass('label_active');
                //--------赋值 start ----------
                $(this).siblings('.label_active').each(function (i, d) {
                    var this_text = $(d).text();
                    value_2_3 += this_text + ',';
                });
                if(label_type == 2){
                    $('#cx_id').val(value_2_3);
                }
                if(label_type == 3){
                    $('#order_cc').val(value_2_3);
                }
                //---------赋值 end ---------
            }
        }
        if(label_type == 1){
            var label_id = $(this).attr('data-id');
            $('#zxlx_id').val(label_id);
        }
        if(label_type == 4){
            var label_id = $(this).attr('data-id');
            $('#hwlx_id').val(label_id);
        }
    });
    /**
     * 出发地
     */
    $('select[name="sheng"]').change(function () {
        var d_id = $(this).val();
        if(d_id == ''){
            $('select[name="shi"]').empty();
            $('select[name="shi"]').append('<option value="">---- 请选择市 ----</option>');
            $('select[name="qu"]').empty();
            $('select[name="qu"]').append('<option value="">---- 请选择区 ----</option>');
        }else{
            getArea(1,d_id,'')
        }
    });
    $('select[name="shi"]').change(function () {
        var d_id = $(this).val();
        if(d_id == ''){
            $('#shi_go').val('');
            $('select[name="qu"]').empty();
            $('select[name="qu"]').append('<option value="">---- 请选择区 ----</option>');
        }else{
            $('#shi_go').val($(this).find("option:selected").text());
            getArea(2,d_id,'')
        }
    });
    /**
     * 目的地
     */
    $('select[name="sheng2"]').change(function () {
        var d_id = $(this).val();
        if(d_id == ''){
            $('select[name="shi2"]').empty();
            $('select[name="shi2"]').append('<option value="">---- 请选择市 ----</option>');
            $('select[name="qu2"]').empty();
            $('select[name="qu2"]').append('<option value="">---- 请选择区 ----</option>');
        }else{
            getArea(1,d_id,2)
        }
    });
    $('select[name="shi2"]').change(function () {
        var d_id = $(this).val();
        if(d_id == ''){
            $('#shi_to').val('');
            $('select[name="qu2"]').empty();
            $('select[name="qu2"]').append('<option value="">---- 请选择区 ----</option>');
        }else{
            $('#shi_to').val($(this).find("option:selected").text());
            getArea(2,d_id,2)
        }
    });
    function getArea(type,id,mww){
        $.ajax({
            url:"{:url('shop/Base/place')}",
            dataType:"json",
            data:'id='+id,
            type:'post',
            success:function(res){
                var opt = null;
                $.each(res.msg,function(key,vo){
                    opt = opt+"<option value="+vo.district_id+">"+vo.district+"</option>";
                })
                if(type==1){
                    $('select[name="shi'+mww+'"]').empty();
                    $('select[name="shi'+mww+'"]').append('<option value="">---- 请选择市 ----</option>');
                    $('select[name="qu'+mww+'"]').empty();
                    $('select[name="qu'+mww+'"]').append('<option value="">---- 请选择区 ----</option>');
                    $('select[name="shi'+mww+'"]').append(opt);
                }else if(type == 2){
                    $('select[name="qu'+mww+'"]').empty();
                    $('select[name="qu'+mww+'"]').append('<option value="">---- 请选择区 ----</option>');
                    $('select[name="qu'+mww+'"]').append(opt);
                }
            }
        })
    }
    //
    function submitOrder(type) {
//        var repeatSubmit = $('#repeatSubmit').val();
//        if(repeatSubmit == 2){
//            alert('请勿重复提交！');
//            return false;
//        }else{
            $('#repeatSubmit').val(2);
            $.ajax({
                url:"{:url('shop/Order/add')}",
                type:'post',
                data:$('#fabuorder').serialize() + '&order_type=' + type,
                dataType:'json',
                success:function(returnData){
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        window.location.href = '/shop/Order/index';
                        return true;
                    }else{
                        $('#repeatSubmit').val(1);
                    }
                }
            })
//        }

    }
</script>